<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mission18</title>
    <style type="text/css">
        fieldset{
            width: 80%;
            margin: 10px auto;
            border-radius: 10px;
            border: 1px solid #8e9197;
            padding: 20px;
        }
        fieldset textarea{
            width: 200px;
            height: 150px;
            border-radius: 5px;
            border: 1px solid #5a5b5b;
            float: left;
            margin-bottom: 10px;
        }
        fieldset .left-content  input{
            width: 200px;
            height: 30px;
            display: block;
            margin-bottom: 10px;
            color: white;
            background-color: #418c59;
            text-align: center;
            line-height: 30px;
            border: 0px;
            border-radius: 10px;
        }
        fieldset .left-content{
            float: left;
            display: block;
            width: 200px;

        }
        .squard{
            width:40px;
            background: #5a5b5b;
            margin: 3px;
            border: 0.5px solid white;
            color: white;
        }
        fieldset #quert-area{
            float: left;
            margin-left: 20px;
        }
        fieldset #quert-area input{
            width: 250px;
            height: 30px;
            display: block;
            margin-bottom: 10px;
        }
        fieldset #quert-area button{
            width: 250px;
            height: 30px;
            display: block;
            margin-bottom: 10px;
            color: white;
            background-color: #418c59;
            text-align: center;
            line-height: 30px;
            border: 0px;
            border-radius: 10px;
        }
        fieldset #quert-area #query-result{
            border:1px solid #5a5b5b;
            border-radius: 5px;
            width: 250px;
            height: 100px;
        }
        .select{
            color: red;
        }
    </style>
</head>
<body>
<fieldset>
    <legend>请输入内容</legend>
    <div class="left-content">
        <textarea type="text"></textarea>
        <input id="addArray" type="button" value="添加">
    </div>
    <div id="quert-area">
        <input type="text" id="queryInput">
        <button id="queryBtn">查询</button>
        <div id="query-result"></div>
    </div>

</fieldset>
<script type="text/javascript" src = "task.js"></script>
</body>
</html>